<template>
	<view>
		<view class="w bac_f">
			<u--form labelPosition="left" :model="form" ref="uForm" :rules="rules" :error-type="errorType">
				<u-form-item label="服务地址" prop="address" borderBottom labelWidth="80">
					<u--input v-model="form.address" border="none" placeholder="请输入服务地址"></u--input>
				</u-form-item>
				<u-form-item label="门牌号" prop="street" borderBottom labelWidth="80"><u--input v-model="form.street" border="none" placeholder="请输入门牌号"></u--input></u-form-item>
				<u-form-item label="联系人" prop="name" borderBottom labelWidth="80"><u--input v-model="form.name" border="none" placeholder="请输入联系人姓名"></u--input></u-form-item>
				<u-form-item label="手机号" prop="mobile" borderBottom labelWidth="80">
					<u--input v-model="form.mobile" border="none" placeholder="请填写联系人手机号码" type="number"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="w bac_f padding30 bz h144 dis_flex mt24">
			<view>
				<view class="fz28">设置默认地址</view>
				<view class="fz24 tf_999 pt10">下单优先使用该地址</view>
			</view>
			<u-switch v-model="value3" size="22" activeColor="#F14537"></u-switch>
		</view>
		<view class="w bac_f h140 tf_4537 tac fz32 p_f dis_f" @click="submit"><view class="w690 lh88 border4537 auto radius8">保存地址</view></view>
	</view>
</template>

<script>
import { addressAdd, getCity } from '@/config/api.js';
export default {
	options: { styleIsolation: 'shared' }, //解决/deep/不生效**
	data() {
		return {
			value3: false,
			errorType: 'message',
			//经纬度
			x: 0,
			y: 0,
			// 用户输入内容 传给后台
			form: {
				address: '',
				name: '',
				mobile: '',
				street: ''
			},
			// 校验
			rules: {
				address: [
					{
						required: true,
						message: '请输入服务地址',
						trigger: ['blur', 'change']
					}
				],
				street: [
					{
						required: true,
						message: '请输入门牌号',
						trigger: ['blur', 'change']
					}
				],
				name: [
					{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}
				],
				mobile: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur']
					},
					{
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '请输入正确的手机号',
						trigger: ['change', 'blur']
					}
				]
			}
		};
	},
	onLoad() {
		this.getLocation();
	},
	methods: {
		//自动定位
		//获取定位
		getLocation() {
			let that = this;
			// 获取用户是否开启 授权获取当前的地理位置、速度的权限。
			uni.getSetting({
				success(res) {
					console.log(res);
					// 如果没有授权
					if (!res.authSetting['scope.userLocation']) {
						// 则拉起授权窗口
						uni.authorize({
							scope: 'scope.userLocation',
							success() {
								//点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
								uni.getLocation({
									type: 'wgs84',
									success: function(res) {
										console.log(res);
										that.x = res.longitude;
										that.y = res.latitude;
										// that.get_city();
									},
									fail(error) {
										console.log('失败', error);
									}
								});
							},
							fail(error) {
								//点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
								console.log('拒绝授权', error);
								uni.showModal({
									title: '提示',
									content: '若点击不授权，将无法使用位置功能',
									cancelText: '不授权',
									cancelColor: '#999',
									confirmText: '授权',
									confirmColor: '#FE9A28',
									success(res) {
										// console.log(res)
										if (res.confirm) {
											// 选择弹框内授权
											uni.openSetting({
												success(res) {}
											});
											// that.getLocation()
										} else if (res.cancel) {
											// 选择弹框内 不授权
											console.log('您选择了不授权');
											uni.setStorageSync('address_id', 221);
											uni.setStorageSync('address_name', '太原市');
											that.area_id = 221;
											that.address_name = '太原市';
										}
									}
								});
							}
						});
					} else {
						// 有权限则直接获取
						uni.getLocation({
							type: 'wgs84',
							success: function(res) {
								console.log(res);
								that.x = res.longitude;
								that.y = res.latitude;
								that.getCity();
							},
							fail(error) {
								uni.showToast({
									title: '请勿频繁调用！',
									icon: 'none'
								});
								console.log('失败', error);
							}
						});
					}
				}
			});
		},
		//获取城市定位
		getCity() {
			getCity({ longitude: this.x, latitude: this.y }).then(res => {
				console.log('城市', res);
				this.form.address = res.address;
			});
		},
		// 新增地址
		address_add() {
			let val = '';
			if (this.value3) {
				val = 1;
			} else {
				val = 2;
			}
			addressAdd({
				address2: this.form.street,
				address1: this.form.address,
				name: this.form.name,
				phone: this.form.mobile,
				default: val
			}).then(res => {
				uni.$emit('refreshData');
				uni.navigateBack({
					delta: 1
				});
			});
		},
		submit() {
			this.$refs.uForm.validate().then(res => {
				uni.$u.toast('地址添加成功');
				if (res) {
					this.address_add();
				}
			});
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background: #f8f8f8;
	color: #222;
}
.bac_f{
	/deep/ .u-form{
		padding: 0 30rpx 0 30rpx;
			.u-form-item{
				.u-form-item__body {
					padding: 30rpx 0 30rpx 0 !important;
				}
			}
	}
}
</style>
